<template>
  <div class="prdp-outer">
    <div class="prdp-main">
      <!-- 头部标题栏 -->
      <div class="prdp-title-bar">
        <h2>炉辊信息</h2>
        <!-- <div class="prdp-status-indicators">
          <div class="prdp-status-item">
            <span class="prdp-status-text">打滑</span>
            <span class="prdp-status-dot"></span>
          </div>
          <div class="prdp-status-item">
            <span class="prdp-status-text">碰撞</span>
            <span class="prdp-status-dot"></span>
          </div>
          <div class="prdp-status-item">
            <span class="prdp-status-text">性能分析</span>
            <span class="prdp-status-dot"></span>
          </div>
        </div> -->
      </div>
      <!-- 搜索栏 -->
      <div class="prdp-search-container">
        <el-form :inline="true" :model="searchForm" class="aprd-search-form">
          <el-form-item label="张力段">
            <el-select v-model="searchForm.tensionSection" placeholder="请选择" style="width:180px" size="small">
              <el-option label="显示全部" value="all" />
              <el-option label="入口Bridle3" value="entry_bridle3" />
              <el-option label="预热/加热段1" value="preheating_heating1" />
              <el-option label="加热段2" value="heating2" />
              <el-option label="加热段3" value="heating3" />
              <el-option label="均热段" value="soaking" />
              <el-option label="缓冷段" value="slow_cooling" />
              <el-option label="快冷段" value="fast_cooling" />
              <el-option label="过时效段1" value="over_aging1" />
              <el-option label="过时效段2" value="over_aging2" />
              <el-option label="过时效段3" value="over_aging3" />
              <el-option label="终冷段" value="final_cooling" />
              <el-option label="出口Bridle4/水淬段" value="exit_bridle4_water_quenching" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">重置</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="prdp-table-container">
        <el-table :data="paginatedTableData" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#333', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="name" label="编号" width="160" />
          <el-table-column prop="tensionSection" label="张力段" width="140">
            <template #default="scope">
              <span :class="`tension-section-tag tension-section-${getTensionSectionClass(scope.row.tensionSection)}`">
                {{ scope.row.tensionSection }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="material" label="辊径" width="100" />
          <el-table-column prop="upTime" label="上机时间" width="130" />
          <el-table-column prop="steelLength" label="通过带钢里程[km]" width="150" />
          <el-table-column prop="osRoughness" label="OS端粗糙度" width="120" />
          <el-table-column prop="centerRoughness" label="中部粗糙度" width="120" />
          <el-table-column prop="dsRoughness" label="DS端粗糙度" width="120" />
          <el-table-column prop="osPredictRoughness" label="OS端预测粗糙度" width="140" />
          <el-table-column prop="centerPredictRoughness" label="中部预测粗糙度" width="140" />
          <el-table-column prop="dsPredictRoughness" label="DS端预测粗糙度" width="140" />
          <el-table-column prop="testTime" label="检测时间" width="130" />
          <el-table-column prop="curve" label="粗糙度衰减曲线" width="140">
            <template #default="scope">
              <el-link type="primary" :underline="false" @click="showRollDetail(scope.row)">更多</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="prdp-pagination">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50, 100]" :total="paginationTotal" background layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>

      <!-- 炉辊详细信息弹窗 -->
      <el-dialog
        v-model="dialogVisible"
        :title="`炉辊信息 - 编号:${currentRoll?.name || ''}`"
        width="90%"
        :before-close="handleClose"
        class="roll-detail-dialog"
      >
        <div class="roll-detail-content">
          <!-- 炉辊基本信息表格 -->
          <div class="roll-info-section">
            <h3>炉辊基本信息</h3>
            <el-table :data="[currentRoll]" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#333', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
              <el-table-column prop="name" label="编号" width="180" />
              <el-table-column prop="tensionSection" label="张力段" width="150" />
              <el-table-column prop="material" label="辊径" width="120" />
              <el-table-column prop="upTime" label="上机时间" width="150" />
              <el-table-column prop="steelLength" label="通过带钢里程[km]" width="180" />
              <el-table-column prop="osRoughness" label="OS端粗糙度" width="140" />
              <el-table-column prop="centerRoughness" label="中部粗糙度" width="140" />
              <el-table-column prop="dsRoughness" label="DS端粗糙度" width="140" />
              <el-table-column prop="osPredictRoughness" label="OS端预测粗糙度" width="160" />
              <el-table-column prop="centerPredictRoughness" label="中部预测粗糙度" width="160" />
              <el-table-column prop="dsPredictRoughness" label="DS端预测粗糙度" width="160" />
              <el-table-column prop="testTime" label="检测时间" width="150" />
            </el-table>
          </div>

          <!-- 粗糙度检测确认 -->
          <div class="roughness-detection-section">
            <h3>粗糙度检测确认</h3>
            <el-form :model="roughnessForm" label-width="120px" class="roughness-form">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="中部粗糙度">
                    <el-input v-model="roughnessForm.centerRoughness" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="OS端粗糙度">
                    <el-input v-model="roughnessForm.osRoughness" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="DS端粗糙度">
                    <el-input v-model="roughnessForm.dsRoughness" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="检测时间">
                    <el-date-picker v-model="roughnessForm.detectionTime" type="datetime" placeholder="选择检测时间" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="modifyRoughness">修改</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 换辊确认 -->
          <div class="roll-change-section">
            <h3>换辊确认</h3>
            <el-form :model="rollChangeForm" label-width="120px" class="roll-change-form">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="中部粗糙度">
                    <el-input v-model="rollChangeForm.centerRoughness" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="OS端粗糙度">
                    <el-input v-model="rollChangeForm.osRoughness" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="DS端粗糙度">
                    <el-input v-model="rollChangeForm.dsRoughness" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="辊径">
                    <el-input v-model="rollChangeForm.rollDiameter" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="涂层材质">
                    <el-input v-model="rollChangeForm.coatingMaterial" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备注">
                    <el-input v-model="rollChangeForm.remarks" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="时间">
                    <el-date-picker v-model="rollChangeForm.changeTime" type="datetime" placeholder="选择换辊时间" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item>
                    <el-button type="primary" @click="modifyRollChange">修改</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';

const searchForm = reactive({
  tensionSection: 'all',
});

// 添加筛选后的表格数据计算属性
const filteredTableData = computed(() => {
  if (searchForm.tensionSection === 'all') {
    return tableData.value;
  }
  return tableData.value.filter(item => {
    switch (searchForm.tensionSection) {
      case 'entry_bridle3':
        return item.tensionSection === '入口Bridle3';
      case 'preheating_heating1':
        return item.tensionSection === '预热/加热段1';
      case 'heating2':
        return item.tensionSection === '加热段2';
      case 'heating3':
        return item.tensionSection === '加热段3';
      case 'soaking':
        return item.tensionSection === '均热段';
      case 'slow_cooling':
        return item.tensionSection === '缓冷段';
      case 'fast_cooling':
        return item.tensionSection === '快冷段';
      case 'over_aging1':
        return item.tensionSection === '过时效段1';
      case 'over_aging2':
        return item.tensionSection === '过时效段2';
      case 'over_aging3':
        return item.tensionSection === '过时效段3';
      case 'final_cooling':
        return item.tensionSection === '终冷段';
      case 'exit_bridle4_water_quenching':
        return item.tensionSection === '出口Bridle4/水淬段';
      default:
        return true;
    }
  });
});

// 添加分页后的数据计算属性
const paginatedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return filteredTableData.value.slice(start, end);
});

// 更新分页总数计算属性
const paginationTotal = computed(() => filteredTableData.value.length);

const tableData = ref([
  {
    name: 'Bridle 3 Roll 1', tensionSection: '入口Bridle3', material: '1.0', upTime: '2020-09-03', steelLength: '56305', osRoughness: '3.2', centerRoughness: '1.8', dsRoughness: '3.1', osPredictRoughness: '1.323', centerPredictRoughness: '0.252', dsPredictRoughness: '1.323', testTime: '2020-09-04', curve: ''
  },
  {
    name: 'Bridle 3 Roll 2', tensionSection: '入口Bridle3', material: '0.8', upTime: '2019-07-23', steelLength: '74129', osRoughness: '3.5', centerRoughness: '2.2', dsRoughness: '3.3', osPredictRoughness: '1.124', centerPredictRoughness: '1.124', dsPredictRoughness: '1.124', testTime: '2020-09-02', curve: ''
  },
  {
    name: 'Preheating Roll 1', tensionSection: '预热/加热段1', material: '1.2', upTime: '2020-08-15', steelLength: '65890', osRoughness: '2.8', centerRoughness: '1.5', dsRoughness: '2.9', osPredictRoughness: '1.456', centerPredictRoughness: '0.893', dsPredictRoughness: '1.567', testTime: '2020-09-01', curve: ''
  },
  {
    name: 'Preheating Roll 2', tensionSection: '预热/加热段1', material: '1.1', upTime: '2020-07-20', steelLength: '72340', osRoughness: '3.1', centerRoughness: '1.9', dsRoughness: '3.0', osPredictRoughness: '1.234', centerPredictRoughness: '0.987', dsPredictRoughness: '1.345', testTime: '2020-08-30', curve: ''
  },
  {
    name: 'Heating Roll 1', tensionSection: '加热段2', material: '1.3', upTime: '2020-06-10', steelLength: '81200', osRoughness: '2.5', centerRoughness: '1.2', dsRoughness: '2.6', osPredictRoughness: '0.987', centerPredictRoughness: '0.654', dsPredictRoughness: '1.123', testTime: '2020-08-25', curve: ''
  },
  {
    name: 'Heating Roll 2', tensionSection: '加热段2', material: '1.25', upTime: '2020-05-18', steelLength: '78900', osRoughness: '2.7', centerRoughness: '1.4', dsRoughness: '2.8', osPredictRoughness: '1.078', centerPredictRoughness: '0.789', dsPredictRoughness: '1.234', testTime: '2020-08-20', curve: ''
  },
  {
    name: 'Heating Roll 3', tensionSection: '加热段3', material: '1.15', upTime: '2020-04-25', steelLength: '85600', osRoughness: '2.9', centerRoughness: '1.6', dsRoughness: '3.0', osPredictRoughness: '1.345', centerPredictRoughness: '0.876', dsPredictRoughness: '1.456', testTime: '2020-08-15', curve: ''
  },
  {
    name: 'Heating Roll 4', tensionSection: '加热段3', material: '1.1', upTime: '2020-03-30', steelLength: '82300', osRoughness: '3.0', centerRoughness: '1.7', dsRoughness: '3.1', osPredictRoughness: '1.234', centerPredictRoughness: '0.765', dsPredictRoughness: '1.345', testTime: '2020-08-10', curve: ''
  },
  {
    name: 'Soaking Roll 1', tensionSection: '均热段', material: '1.05', upTime: '2020-02-15', steelLength: '90100', osRoughness: '2.6', centerRoughness: '1.3', dsRoughness: '2.7', osPredictRoughness: '0.987', centerPredictRoughness: '0.543', dsPredictRoughness: '1.123', testTime: '2020-08-05', curve: ''
  },
  {
    name: 'Soaking Roll 2', tensionSection: '均热段', material: '1.0', upTime: '2020-01-20', steelLength: '87800', osRoughness: '2.8', centerRoughness: '1.5', dsRoughness: '2.9', osPredictRoughness: '1.123', centerPredictRoughness: '0.678', dsPredictRoughness: '1.234', testTime: '2020-07-30', curve: ''
  },
  {
    name: 'Slow Cooling Roll 1', tensionSection: '缓冷段', material: '1.2', upTime: '2019-07-23', steelLength: '74129', osRoughness: '3.2', centerRoughness: '1.8', dsRoughness: '3.1', osPredictRoughness: '1.124', centerPredictRoughness: '0.993', dsPredictRoughness: '1.124', testTime: '2020-09-05', curve: ''
  },
  {
    name: 'Slow Cooling Roll 2', tensionSection: '缓冷段', material: '1.15', upTime: '2020-09-06', steelLength: '55560', osRoughness: '3.4', centerRoughness: '2.0', dsRoughness: '3.3', osPredictRoughness: '1.333', centerPredictRoughness: '1.862', dsPredictRoughness: '1.333', testTime: '2020-09-06', curve: ''
  },
  {
    name: 'Fast Cooling Roll 1', tensionSection: '快冷段', material: '0.9', upTime: '2020-08-10', steelLength: '67800', osRoughness: '2.7', centerRoughness: '1.4', dsRoughness: '2.8', osPredictRoughness: '1.078', centerPredictRoughness: '0.765', dsPredictRoughness: '1.234', testTime: '2020-08-28', curve: ''
  },
  {
    name: 'Fast Cooling Roll 2', tensionSection: '快冷段', material: '0.85', upTime: '2020-07-15', steelLength: '71200', osRoughness: '2.9', centerRoughness: '1.6', dsRoughness: '3.0', osPredictRoughness: '1.234', centerPredictRoughness: '0.876', dsPredictRoughness: '1.345', testTime: '2020-08-22', curve: ''
  },
  {
    name: 'Over Aging Roll 1', tensionSection: '过时效段1', material: '0.25', upTime: '2019-07-23', steelLength: '74129', osRoughness: '3.1', centerRoughness: '1.7', dsRoughness: '3.0', osPredictRoughness: '1.124', centerPredictRoughness: '1.124', dsPredictRoughness: '1.124', testTime: '2020-09-03', curve: ''
  },
  {
    name: 'Over Aging Roll 2', tensionSection: '过时效段2', material: '0.25', upTime: '2019-07-23', steelLength: '74129', osRoughness: '3.3', centerRoughness: '2.1', dsRoughness: '3.2', osPredictRoughness: '1.372', centerPredictRoughness: '1.472', dsPredictRoughness: '1.472', testTime: '2020-11-27', curve: ''
  },
  {
    name: 'Over Aging Roll 3', tensionSection: '过时效段3', material: '0.3', upTime: '2020-11-27', steelLength: '37840', osRoughness: '3.5', centerRoughness: '2.3', dsRoughness: '3.4', osPredictRoughness: '-0.282', centerPredictRoughness: '-0.282', dsPredictRoughness: '-0.282', testTime: '2020-11-27', curve: ''
  },
  {
    name: 'Final Cooling Roll 1', tensionSection: '终冷段', material: '1.1', upTime: '2020-06-15', steelLength: '65400', osRoughness: '2.8', centerRoughness: '1.4', dsRoughness: '2.9', osPredictRoughness: '1.156', centerPredictRoughness: '0.789', dsPredictRoughness: '1.267', testTime: '2020-08-18', curve: ''
  },
  {
    name: 'Final Cooling Roll 2', tensionSection: '终冷段', material: '1.05', upTime: '2020-05-20', steelLength: '68900', osRoughness: '3.0', centerRoughness: '1.6', dsRoughness: '3.1', osPredictRoughness: '1.234', centerPredictRoughness: '0.876', dsPredictRoughness: '1.345', testTime: '2020-08-12', curve: ''
  },
  {
    name: 'Bridle 4 Roll 1', tensionSection: '出口Bridle4/水淬段', material: '1.2', upTime: '2020-04-10', steelLength: '72300', osRoughness: '3.1', centerRoughness: '1.7', dsRoughness: '3.0', osPredictRoughness: '1.189', centerPredictRoughness: '0.654', dsPredictRoughness: '1.298', testTime: '2020-08-08', curve: ''
  },
  {
    name: 'Bridle 4 Roll 2', tensionSection: '出口Bridle4/水淬段', material: '1.15', upTime: '2020-03-15', steelLength: '75600', osRoughness: '3.3', centerRoughness: '1.9', dsRoughness: '3.2', osPredictRoughness: '1.267', centerPredictRoughness: '0.789', dsPredictRoughness: '1.356', testTime: '2020-08-05', curve: ''
  }
]);

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 22,
});

const handleSearch = () => {
  // 重置搜索条件并回到第一页
  searchForm.tensionSection = 'all';
  pagination.currentPage = 1;
};
const handleExport = () => {
  // 导出逻辑
};
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
};
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
};

const getTensionSectionClass = (section: string) => {
  switch (section) {
    case '入口Bridle3':
      return 'entry_bridle3';
    case '预热/加热段1':
      return 'preheating_heating1';
    case '加热段2':
      return 'heating2';
    case 'heating3':
      return 'heating3';
    case '均热段':
      return 'soaking';
    case '缓冷段':
      return 'slow_cooling';
    case '快冷段':
      return 'fast_cooling';
    case '过时效段1':
      return 'over_aging1';
    case '过时效段2':
      return 'over_aging2';
    case '过时效段3':
      return 'over_aging3';
    case '终冷段':
      return 'final_cooling';
    case '出口Bridle4/水淬段':
      return 'exit_bridle4_water_quenching';
    default:
      return '';
  }
};

// 弹窗相关数据
const dialogVisible = ref(false);
const currentRoll = ref<any>(null);

// 粗糙度检测表单
const roughnessForm = reactive({
  centerRoughness: '',
  osRoughness: '',
  dsRoughness: '',
  detectionTime: null as any
});

// 换辊确认表单
const rollChangeForm = reactive({
  centerRoughness: '',
  osRoughness: '',
  dsRoughness: '',
  rollDiameter: '',
  coatingMaterial: '',
  remarks: '',
  changeTime: null as any
});

// 显示炉辊详情弹窗
const showRollDetail = (row: any) => {
  currentRoll.value = row;
  // 初始化表单数据
  roughnessForm.centerRoughness = row.centerRoughness || '';
  roughnessForm.osRoughness = row.osRoughness || '';
  roughnessForm.dsRoughness = row.dsRoughness || '';
  roughnessForm.detectionTime = null;
  
  rollChangeForm.centerRoughness = row.centerRoughness || '';
  rollChangeForm.osRoughness = row.osRoughness || '';
  rollChangeForm.dsRoughness = row.dsRoughness || '';
  rollChangeForm.rollDiameter = row.material || '';
  rollChangeForm.coatingMaterial = '';
  rollChangeForm.remarks = '';
  rollChangeForm.changeTime = null;
  
  dialogVisible.value = true;
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  currentRoll.value = null;
};

// 修改粗糙度检测
const modifyRoughness = () => {
  ElMessage.success('粗糙度检测信息已更新');
  // 这里可以添加实际的API调用逻辑
};

// 修改换辊信息
const modifyRollChange = () => {
  ElMessage.success('换辊信息已更新');
  // 这里可以添加实际的API调用逻辑
};

// 查看粗糙度衰减曲线
const viewRoughnessCurve = () => {
  ElMessage.info('打开粗糙度衰减曲线图表');
  // 这里可以添加打开图表的逻辑
};
</script>

<style scoped>
.prdp-outer {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, #eaf1fb 0%, #2c69e8 100%);
  overflow: hidden;
}
.prdp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
}
.prdp-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.el-table {
  flex: 1;
  height: 100% !important;
  min-height: 0;
}
.prdp-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.prdp-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.prdp-title-bar h2 {
  margin: 0;
  color: #333;
}

.prdp-status-indicators {
  display: flex;
  gap: 20px;
}

.prdp-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prdp-status-text {
  color: #333;
  font-size: 14px;
}

.prdp-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #67c23a;
  display: inline-block;
}

.prdp-search-container {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 等级指示器样式 */
.prdp-grade-indicator {
  display: flex;
  justify-content: center;
}

.prdp-grade-a {
  color: #67c23a;
  font-weight: bold;
}

.prdp-grade-b {
  color: #409eff;
  font-weight: bold;
}

.prdp-grade-c {
  color: #e6a23c;
  font-weight: bold;
}

.prdp-grade-d {
  color: #f56c6c;
  font-weight: bold;
}

.prdp-rate-indicator {
  text-align: center;
}

/* 张力段标签样式 */
.tension-section-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  min-width: 80px;
  white-space: nowrap;
}

.tension-section-entry_bridle3 {
  background-color: #e1f3d8;
  color: #67c23a;
  border: 1px solid #c2e7b0;
}

.tension-section-preheating_heating1 {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.tension-section-heating2 {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-heating3 {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-soaking {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-slow_cooling {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-fast_cooling {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-over_aging1 {
  background-color: #e1f3d8;
  color: #67c23a;
  border: 1px solid #c2e7b0;
}

.tension-section-over_aging2 {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.tension-section-over_aging3 {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-final_cooling {
  background-color: #e1f3d8;
  color: #67c23a;
  border: 1px solid #c2e7b0;
}

.tension-section-exit_bridle4_water_quenching {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.tension-section-water_clamp {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}

.tension-section-seal {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

/* 表格行悬停效果 */
.el-table tbody tr:hover > td {
  background-color: #f5f7fa !important;
}

/* 搜索容器样式优化 */
.prdp-search-container {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格容器样式优化 */
.prdp-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 分页样式 */
.prdp-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background: white;
  border-top: 1px solid #ebeef5;
}

/* 弹窗样式 */
.roll-detail-dialog {
  .el-dialog__body {
    padding: 20px;
  }
}

.roll-detail-content {
  .roll-info-section,
  .roughness-detection-section,
  .roll-change-section {
    margin-bottom: 30px;
    
    h3 {
      margin: 0 0 20px 0;
      color: #333;
      font-size: 18px;
      font-weight: 600;
      border-bottom: 2px solid #409eff;
      padding-bottom: 10px;
    }
  }
}

.roughness-form,
.roll-change-form {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  
  .el-form-item {
    margin-bottom: 18px;
  }
  
  .el-button {
    margin-top: 10px;
  }
}

.dialog-footer {
  text-align: right;
}
</style>
